<template>
  <div class="table-column-head"
       :title="filterContent">
    <span class="column-lable">{{columnLabel}} </span>
    <el-popover popper-class="table-column-filter"
                placement="right"
                width="320"
                trigger="click"
                v-model="popoverVisible">
      <h3 class="filter-title">{{columnLabel}} - 筛选</h3>
      <div class="filter-box">
        <el-form ref="filterForm"
                 :model="filterForm"
                 label-width="80px"
                 size="mini">
          <el-form-item prop="filterVal"
                        :label="filterTypeText"
                        :rules="[required]">
            <el-input v-model.trim="filterForm.filterVal"
                      :placeholder="`请输入${filterTypeText}`"></el-input>
          </el-form-item>
          <el-form-item prop="filterCondition"
                        label="筛选条件"
                        :rules="[required]">
            <el-select v-model="filterForm.filterCondition"
                       style="width:100%"
                       placeholder="请选择筛选条件">
              <el-option v-for="item in filterOptions"
                         :key="item.dictValue"
                         :label="item.dictLabel"
                         :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: right; margin: 0">
        <el-button size="mini"
                   type="text"
                   @click="popoverVisible = false">关闭</el-button>
        <el-button size="mini"
                   @click="cancelFilter">取消筛选</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="submitFilter">确定筛选</el-button>
      </div>
      <svg-icon icon-class="filter"
                :class-name="`filter-icon ${filterSwitch?'on':''}`"
                slot="reference" />
    </el-popover>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'TableColumnFilter',
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    columnLabel: {
      type: String,
      default: ''
    },
    columnProp: {
      type: String,
      default: ''
    },
    filterOptionType: {
      type: String,
      default: '文字' // 两种类型：文字和数值
    }
  },
  computed: {
    ...mapGetters(['filterFieldOptions', 'filterNumValOptions']),
    filterContent() {
      if (!this.filterSwitch) return '';
      let { filterVal, filterCondition } = this.filterForm;
      let findCondition = this.filterOptions.find(item => item.dictValue === filterCondition);
      return `筛选内容：${filterVal}\n筛选条件：${findCondition.dictLabel}`;
    },
    filterOptions() {
      let { filterOptionType } = this;
      return filterOptionType === '文字' ? this.filterFieldOptions : this.filterNumValOptions;
    },
    filterTypeText(){
      let { filterOptionType } = this;
      return filterOptionType === '文字' ? '筛选内容' : '筛选数值';
    }
  },
  data() {
    return {
      popoverVisible: false,
      filterSwitch: false,
      filterForm: {
        filterVal: '',
        filterCondition: '',
      },
      required: {
        required: true,
        message: '必填，不能为空',
        trigger: ['blur', 'change']
      }
    }
  },
  methods: {
    // 提交筛选
    submitFilter() {
      this.$refs.filterForm.validate((valid) => {
        if (valid) {
          let { filterVal, filterCondition } = this.filterForm;
          let filterObj = {
            prop: this.columnProp, // 筛选字段
            filterVal, // 筛选内容
            filterCondition // 筛选条件
          }
          this.filterSwitch = true;
          this.popoverVisible = false;
          this.handleAddFilterObj(filterObj);
        } else {
          this.msgWarning('请正确填写筛选内容')
        }
      });
    },
    // 添加筛选参数
    handleAddFilterObj(filterObj) {
      let filterParams = JSON.parse(JSON.stringify(this.value))
      let { prop, filterVal, filterCondition } = filterObj;
      // 如果没有参数对象，创建
      if (!filterParams[prop]) {
        filterParams[prop] = {}
      }
      filterParams[prop].filterVal = filterVal;
      filterParams[prop].filterCondition = filterCondition;
      this.$emit('input', filterParams);
      this.$emit('execute-filter');
    },
    // 取消筛选
    cancelFilter() {
      this.$refs.filterForm.resetFields();
      this.handleRemoveFilterObj(this.columnProp)
      this.filterSwitch = false;
      this.popoverVisible = false;
    },
    // 移除筛选参数
    handleRemoveFilterObj(columnProp) {
      let filterParams = JSON.parse(JSON.stringify(this.value));
      if (!filterParams[columnProp]) {
        return false;
      }
      // 移除参数对象
      delete filterParams[columnProp];
      this.$emit('input', filterParams);
      this.$emit('execute-filter');
    }
  },
}
</script>

<style lang="scss" scoped>
.table-column-head {
  .column-lable {
    vertical-align: middle;
  }
  .filter-icon {
    vertical-align: middle;
    width: 13px;
    height: 13px;
    color: #409eff;
    outline: none;
    cursor: pointer;
    &.on {
      color: #f56c6c;
    }
  }
}
.filter-title {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 14px;
}
</style>